import React, { useState, useContext } from 'react'

// 1. 创建一个上下文对象
const titleContext = React.createContext()

const First = () => {
    return (<>
        <h1>First</h1>
        {/* 可以实现接收但是太麻烦了，接收的内容多更麻烦了 */}
        <titleContext.Consumer>
            {
                (value) => {
                    return <h1>{value}</h1>
                }
            }
        </titleContext.Consumer>

        <Second />
    </>)
}



const Second = () => {

    const value = useContext(titleContext)

    return (<>
        <h1>Second - {value} </h1>
    </>)
}

export default function App() {
    const [title] = useState('传家宝')
    return (
        <div>
            <h1>app - {title} </h1>
            <hr />
            <titleContext.Provider value={title}>
                <First />
            </titleContext.Provider>

        </div>
    )
}
